<template>
	<view class="budget-component-container">
		<top-title-text @closeBtn="closeBtn" titleText="预算中心"></top-title-text>
		<u-scroll-list :indicator="indicator" indicatorColor="#fcf4cb" indicatorActiveColor="#f0df7c">
			<view class="budget-item-container">
				<view :class="['budget-popup-container', {'select': index == accountBookIndex}]" v-for="(item, index) in accountBookList" :style="{backgroundColor: item.bgcColor}" :key="index" @click="select(item, index)">
					<view class="budget-up-acconut-book-name-container">{{item.name}}</view>
					<view class="budget-center-acconut-book-icon-container">
						<view :class="['budget-center-acconut-book-icon-content', 'iconfont', item.icon]"></view>
					</view>
					<view class="budget-center-acconut-book-budget-container">
						<view :style="" class="budget-center-acconut-book-budget-content">
							<u--input border="none" type="number" v-model="item.budget" placeholder="设置预算" @change="change(index)"></u--input>
						</view>
					</view>
				</view>
			</view>
		</u-scroll-list>
		<scroll-view scroll-y="true" style="height: 900rpx;width: 100%;">
		    <view class="budget-category-container" v-if="categoryList">
				<view class="budget-category-item-container" v-for="(category, index) in categoryList" :key="index">
					<view class="left-icon-name-container">
						<view class="left-container-icon-container">
							<view class="left-container-icon-bgc-container" @click="add(category, index)" :style="{backgroundColor: category.bgcColor}">
								 <view :class="['left-container-icon-content', 'iconfont', category.icon]"></view>
							</view>
						</view>
						<view class="left-container-name-container">{{category.name}}</view>
					</view>
					<view class="right-budget-container">
						<view class="right-budget-content">
							<u--input border="none" type="number" v-model="category.budget" placeholder="设置预算" @change="change"></u--input>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import topTitleText from '@/components/top-title-text/top-title-text.vue';
	import {checkStrType2} from '@/util/regular/regular.js';
    export default {
		components: {
			topTitleText, 
		},
		props: {
			accountBookList: {
				type: Array,
				default: () => []
			}
		},
        data() {
            return {
				test: '',
				accountBookIndex: 1,					// 账本索引
				categoryList: [],						// 分类集合
				indicator: false,
				bgcColor: [],							// 账本背景色 两种
				num: 0,									// 测试使用
            }
        },
		methods: {
			/** 根据传入的名字长度
			 * @param {Object} index 索引
			 */
			change(index) {
				
			},
			/** 点击选中账本
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			select(item, index1) {
				this.accountBookIndex = index1;
				this.categoryList = this.accountBookList[this.accountBookIndex].payCategoryList;
			},
			/** 返回背景颜色
			 * @param {Object} index 索引
			 */
			getColor(index) {
				var number = this.num++ % 2;
				console.log(number, "数字")
				return this.bgcColor[number].bgcColor;
			},
			/** 关闭本弹框
			 */
			closeBtn() {
				this.$emit("closeBtn");
			}
		},
		mounted() {
			if (this.accountBookList) {
				this.categoryList = this.accountBookList[this.accountBookIndex].payCategoryList;
			}
		},
    }
</script>

<style lang="scss">
	
	.budget-component-container {
		width: 100%;
		min-height: 1320rpx;
		padding: 20rpx;
		box-sizing: border-box;
		
		.budget-item-container {
			display: flex;
			padding-bottom: 20rpx;
			
			.budget-popup-container {
				width: 200rpx;
				height: 270rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
				margin-right: 20rpx;
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				
				.budget-up-acconut-book-name-container {
					width: 100%;
					height: 33%;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					font-size: 28rpx;
					font-weight: bold;
					color: white;
				}
				
				.budget-center-acconut-book-icon-container {
					width: 100%;
					height: 33%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					color: $themeIconLightGreyColor;
					
					.budget-center-acconut-book-icon-content {
						font-size: 70rpx;
						opacity: 0.5;
					}
				}
				
				.budget-center-acconut-book-budget-container {
					width: 100%;
					height: 33%;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					
					.budget-center-acconut-book-budget-content {
						padding: 20rpx;
						height: 50%;
						box-sizing: border-box;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: $themeBgcLightGreyColor;
						border-radius: 20rpx;
						font-weight: bold;
					}
				}
			}
			
			.select {
				border: 5rpx solid $themePurpleColor;
			}
		}
		
		.budget-category-container {
			width: 100%;
			min-height: 700rpx;
			box-sizing: border-box;
			
			.budget-category-item-container {
				width: 100%;
				height: 100rpx;
				box-sizing: border-box;	
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.left-icon-name-container {
					width: 50%;
					height: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					
					.left-container-icon-container {
						width: 22%;
						height: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						
						.left-container-icon-bgc-container {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							// background-color: $themeYellowColor;
							display: flex;
							justify-content: center;
							align-items: center;
							
							.left-container-icon-content {
								color: white;
							}
						}
					}
					
					.left-container-name-container {
						font-size: 30rpx;
					}
				}
				
				.right-budget-container {
					width: 30%;
					height: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					
					.right-budget-content {
						height: 50%;
						border-radius: 20rpx;
						background-color: $themeBgcLightGreyColor;
						padding: 0rpx 20rpx;
						box-sizing: border-box;
						font-weight: bold;
					}
				}
			}
		}
	}
	
</style>
